<template>
  <div class="box">
    <div class="top">
      <van-nav-bar title="问专家" left-arrow @click-left="onClickLeft" />
      <div class="search-1">
        <van-sticky>
          <van-search
            v-model="searchKeyword"
            placeholder="搜索医生、医院或疾病症状"
            @change="filteredUsers"
          />
        </van-sticky>
      </div>
    </div>
    <div class="re">
      <h3>热门科室</h3>
      <div class="ke">
        <ul>
          <li
            v-for="(item, index) in listData"
            :key="index"
            @click="serchke(item, index)"
            :class="index == active ? 'aie' : ''"
          >
            {{ item.all }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 下拉菜单 -->
    <van-dropdown-menu class="cai">
      <van-dropdown-item title="全部科室" :option="1" ref="itemRef2">
        <div class="search-ke">
          <div class="left">
            <ul>
              <li
                v-for="(item, index) in listData"
                :key="index"
                :class="active === index ? 'active' : ''"
                @click="onclick(index)"
              >
                {{ item.all }}
              </li>
            </ul>
          </div>
          <div class="right">
            <ul>
              <li
                v-for="(item, index) in listData"
                :key="index"
                :class="active === index ? 'actives' : ''"
                @click="onclicks(item, index)"
              >
                {{ item.class }}
              </li>
            </ul>
          </div>
        </div>
      </van-dropdown-item>

      <van-dropdown-item title="全国" ref="itemRef1">
        <div class="quan">
          <div class="left">
            <ul>
              <li
                v-for="(item, index) in cityData"
                :key="index"
                @click="china(item, index)"
                :class="activeq === index ? 'activeq' : ''"
              >
                {{ item.province }}
              </li>
            </ul>
          </div>
          <div class="right">
            <ul>
              <li
                v-for="(item, index) in addressList"
                :key="index"
                @click="chinas(item, index)"
                :class="activeshi === index ? 'activeshi' : ''"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </van-dropdown-item>

      <van-dropdown-item title="排序" ref="itemRef">
        <div class="sort">
          <ul>
            <li
              v-for="(item, index) in bookList"
              :key="index"
              :class="activem === index ? 'activem' : ''"
              @click="sort(item, index)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 专家 -->
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="wen">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list">
          <div class="list-1" v-for="(item, index) in listDataSearch" :key="index">
            <div class="left">
              <div>
                <img :src="item.avatar" v-lazy="item.avatar" alt="" />
              </div>
            </div>
            <div class="right">
              <div class="right1">
                <p>
                  <span class="name">{{ item.name }}</span>
                  <span class="position">{{ item.position }}</span>
                </p>
                <p>
                  <span>{{ item.address }}</span> <span>{{ item.hospital }}</span
                  ><span>{{ item.all }}</span>
                </p>
                <p class="tuwen">
                  <span class="tuwen1">图文咨询</span>
                  <span class="tuwen2">电话咨询</span>
                  <span class="tuwen3">优选药房</span>
                </p>
                <p class="shan">擅长：{{ item.strong }}</p>
                <div class="haoping">
                  <p>
                    <span>好评率</span><span class="orange">{{ item.praise }}%</span> <b>|</b>
                  </p>
                  <p>
                    <span>锦旗</span><span class="orange">{{ item.reply }}</span> <b>|</b>
                  </p>
                  <p>
                    <span>浏览人次</span><span class="orange">{{ item.browse }}</span>
                  </p>
                </div>
                <div class="wenyi">
                  <p>
                    <span>￥</span><span>{{ item.fans }}</span
                    ><span>起</span>
                  </p>
                  <button @click="toDetail(item.id)">问医生</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh> -->

    <van-pull-refresh v-model="loading" @refresh="onRefresh" class="wen">
      <div class="list">
        <div class="list-1" v-for="(item, index) in listDataSearch" :key="index">
          <div class="left">
            <div>
              <img :src="item.avatar" v-lazy="item.avatar" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="right1">
              <p>
                <span class="name">{{ item.name }}</span
                ><span class="position">{{ item.position }}</span>
              </p>
              <p>
                <span>{{ item.address }}</span> <span>{{ item.hospital }}</span
                ><span>{{ item.all }}</span>
              </p>
              <p class="tuwen">
                <span class="tuwen1">图文咨询</span>
                <span class="tuwen2">电话咨询</span>
                <span class="tuwen3">优选药房</span>
              </p>
              <p class="shan">擅长：{{ item.strong }}</p>
              <div class="haoping">
                <p>
                  <span>好评率</span><span class="orange">{{ item.praise }}%</span> <b>|</b>
                </p>

                <p>
                  <span>锦旗</span><span class="orange">{{ item.reply }}</span> <b>|</b>
                </p>
                <p>
                  <span>浏览人次</span><span class="orange">{{ item.browse }}</span>
                </p>
              </div>
              <div class="wenyi">
                <p>
                  <span>￥</span><span>{{ item.fans }}</span
                  ><span>起</span>
                </p>
                <button @click="toDetail(item.id)">问医生</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import http from '@/utils/http'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { throttle } from 'lodash'

const itemRef = ref(null)
const itemRef1 = ref(null)
const itemRef2 = ref(null)
const active = ref(0)
const activeq = ref(0)
const activem = ref(0)
const activeshi = ref(0)
const router = useRouter()
const list = ref([])

const listData = ref([])
const listDataSearch = ref([])
const cityindex = ref(0)
const pageCode = ref(1)
const pageSize = ref(8)
const finished = ref(false)
const loading = ref(false)
const hasMoreData = ref(true)
const addressList = ref([])
// 列表数据
const GetList = async () => {
  const res = await http.get('/api/doctorList', {
    params: { pageCode: pageCode.value, pageSize: pageSize.value },
  })
  console.log(res)

  const data = res.data.data
  listData.value = data
  if (data.length < pageSize.value) {
    hasMoreData.value = false
  }
  listDataSearch.value = data
  return data
}
GetList()
// 上垃加载 下拉刷新
// const onLoad=()=>{
//    setTimeout(() => {
//       pageCode.value++
//       http.get('/api/doctorList',{params:{ pageCode:pageCode.value,pageSize:pageSize.value }})
//       .then((res)=>{
//          console.log(res);
//         listDataSearch.value=listData.value.concat(res.data.data)
//       }).catch((err)=>{
//         console.log(err);
//       })
//       loading.value=false;
//       if(listDataSearch.value.length>=100)
//       {
//           finished.value=true
//       }
//    }, 1000);
// }
const onRefresh = async () => {
  loading.value = true
  pageCode.value++
  pageSize.value = 8
  try {
    setInterval(() => {
      GetList()
      loading.value = false
      finished.value = false
    }, 3000)
  } catch (error) {
    console.error('下拉刷新获取数据出错：', error)
    loading.value = false
  }
}
// const onRefresh=async()=>{
//    loading.value=true
//    pageCode.value++
//    pageSize.value++
//    try{
//      setInterval(()=>{
//        GetList()
//        loading.value=false
//        finished.value=false
//      },3000)
//    }
//    catch(error){
//      console.log('下拉刷新获取的数据报错',error); 
//    }
// }
// 详情
const toDetail = async (id: number) => {
  console.log(id)
  router.push({ path: '/homeDetail', query: { id: id } })
  console.log(id)
}
// 默认排序筛选
const sort = async (item: string, index: number) => {
  activem.value = index
  console.log(index)
  console.log(item)
  if (item.title === '默认排序') {
    await http.get(`/api/doctorList?doctorList=${item}`).then((res) => {
      listDataSearch.value = res.data.data
    })
  }
  else if (item.title === '接诊人次从多到少') {
    await http.get(`/api/FirstSort?doctorList=${item}`).then((res) => {
      listDataSearch.value = res.data.data
    })
  } else if (item.title === '好评率从高到低') {
    await http.get(`/api/FirstPrasieSort?doctorList=${item}`).then((res) => {
      listDataSearch.value = res.data.data
    })
  } else if (item.title === '响应时间从短到长') {
    await http.get(`/api/FirstReplySort?doctorList=${item}`).then((res) => {
      listDataSearch.value = res.data.data
    })
  }
  itemRef.value.toggle()
}

// 城市数据
const cityData = ref([])
async function GetCity() {
  const res = await http.get('/api/city')
  console.log(res)
  const data = res.data.data
  cityData.value = data
  console.log(cityData.value)
  addressList.value = data[cityindex.value].cities
}
GetCity()
// 全国筛选
const china = async (item: string, index: number) => {
  console.log(item.province)
  console.log(index)
  cityindex.value = index
  addressList.value = item.cities
  activeq.value = index
}
const chinas = async (item: string, index: number) => {
  console.log(item)
  await http.get(`/api/doctorList?address=${item}`).then((res) => {
    listDataSearch.value = res.data.data
    console.log('====================================')
    console.log(listDataSearch.value)
    console.log('====================================')
  })
  activeshi.value = index;
  itemRef1.value.toggle();
}
// 搜索
const searchKeyword = ref('')
const filteredUsers = throttle(() => {
  if (searchKeyword.value === '') {
    listDataSearch.value = listData.value
  } 
  else {
    listDataSearch.value = listData.value.filter((item) =>
     item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
}, 5000)
watch(searchKeyword, filteredUsers)
// const searchKey = ref('')
const serchke = async (item: string, index: number) => {
  console.log(item.all)
  await http.get(`/api/doctorList?all=${item.all}`).then((res) => {
    listDataSearch.value = res.data.data
    console.log(listDataSearch.value)
  })
  active.value = index
}
// 排序
const bookList=ref([
   {
     title:'默认排序',
   },
   {
     title:'接诊人次从多到少'
   },
   {
     title:'好评率从高到低'
   },
   {
     title:'响应时间从短到长'
   }
])
// 科室筛选
const onclick = (index: number) => {
  active.value = index
  console.log(active.value)
  GetList()
}
const onclicks = async (item: string, index: number) => {
  // console.log(item.class)
  await http.get(`/api/doctorList?Department=${item.class}`).then((res) => {
    listDataSearch.value = res.data.data
    // console.log(listDataSearch.value);
  })
  active.value = index
  itemRef2.value.toggle()

}
// 返回上一页
const onClickLeft = () => history.back()
http
  .get('/api/doctorList')
  .then((res) => {
    list.value = res.data.data
    console.log(list.value, 'list')
  })
  .catch((error) => {
    console.log(error)
  })
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 210px;
  .search-1 {
    width: 100%;
    height: 60px;
    margin-top: 20px;
  }
}
.re {
  width: 100%;
  height: 360px;
  z-index: 999999999999;
  h3 {
    padding-left: 30px;
    width: 100%;
    height: 90px;
    font-size: 40px;
    line-height: 90px;
  }
  .ke {
    width: 100%;
    height: 220px;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: space-evenly;
      overflow: auto;
      flex-wrap: wrap;
      align-content: space-between;
      li {
        display: block;
        width: 2.1875rem;
        border-radius: 1.25rem;
        background: #f1f3ff;
        text-align: center;
        color: #386eff;
        margin: 20px 0;
        font-size: 24px;
        padding: 15px;
        font-weight: 400;
      }
      .aie {
        background: #3b68c3;
        color: #fff;
      }
    }
  }
}
.search-ke {
  width: 100%;
  height: 500px;
  display: flex;
  .left {
    width: 30%;
    height: 500px;
    background: #f6f6f6;
    overflow-y: auto;
    ul {
      li {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
    .active {
      background: #ffffff;
      color: #386eff;
    }
  }
  .right {
    height: 500px;
    flex: 1;
    overflow-y: auto;
    ul {
      li {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
    .actives {
      background: #3b68c3;
      color: #fff;
    }
  }
}
.quan {
  width: 100%;
  height: 500px;
  display: flex;
  .left {
    width: 30%;
    height: 500px;
    background: #f6f6f6;
    overflow-y: auto;
    ul {
      li {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
    .activeq {
      background: #ffffff;
      color: #386eff;
    }
  }
  .right {
    width: 70%;
    height: 500px;
    background: #fff;
    overflow-y: auto;
    ul {
      li {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
    .activeshi {
      background: #3b68c3;
      color: #fff;
    }
  }
}
.sort {
  width: 100%;
  height: 500px;
  ul {
    li {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
    .activem {
      background: #3b68c3;
      color: #fff;
    }
  }
}
.cai {
  width: 100%;
  height: 100px;
}
.wen {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .list {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    .list-1 {
      width: 97%;
      height: 440px;
      border-radius: 10px;
      display: flex;
      .left {
        width: 20%;
        height: 440px;

        div {
          padding-left: 30px;
          padding-top: 30px;
          img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
      }
      .right {
        width: 80%;
        height: 440px;
        padding: 4px;
        .right1 {
          width: 100%;
          height: 440px;
          margin-top: 40px;
          padding-left: 30px;
          :nth-child(1) {
            margin: 10px 0;
            .name {
              font-size: 35px;
              font-weight: 600;
              margin-right: 20px;
            }
          }
          :nth-child(2) {
            margin: 10px 0;
            span {
              margin-right: 10px;
            }
          }
          .tuwen {
            width: 100%;
            height: 70px;
            line-height: 70px;
            .tuwen1 {
              background: #d9eaff;
              color: #3b68c3;
            }
            .tuwen2 {
              background: #e4f9f4;
              color: #1aa180;
            }
            .tuwen3 {
              background: #ffeee7;
              color: #e1642a;
            }
            span {
              width: 100px;
              margin-right: 20px;
              text-align: center;
              padding: 10px;
              height: 40px;
              border-radius: 5px;
            }
          }
          .shan {
            color: #8d8d8d;
          }
          .haoping {
            width: 100%;
            height: 50px;

            display: flex;
            line-height: 50px;
            p {
              padding: 0;
              margin-top: 10px;
              margin-right: 20px;
              span {
                margin-right: 5px;
                color: #979797;
              }
              b {
                font-weight: normal;
                color: #e7e7e7;
              }
              .orange {
                color: orange;
                font-weight: 600;
              }
            }
          }
          .wenyi {
            width: 100%;
            height: 100px;
            padding-right: 30px;
            line-height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              :nth-child(1) {
                color: orange;
                font-size: 20px;
                font-weight: bold;
              }
              :nth-child(2) {
                color: orange;
                font-size: 33px;
                font-weight: bold;
              }
              :nth-child(3) {
                margin-left: 10px;
                color: #8d8d8d;
                font-size: 24px;
              }
            }
            button {
              background: #1e69f6;
              border: 0;
              color: #fff;
              padding: 10px 20px;
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
  .no-more-data {
    text-align: center;
    padding: 10px;
    color: #999;
  }
}
</style>